<template>
    <div class="content-container" direction="vertical">
        <div>
            <el-container class="content-row" >
                <div class="input-tip">
                    订单状态：
                </div>
                <div class="input-field">
                    <el-select v-model="queryParam.orderState" placeholder="请选择">
                      <el-option key="1" label="已发货" value="1"></el-option>
                      <el-option key="2" label="未发货" value="2"></el-option>
                    </el-select>
                </div>
                <div class="input-tip">
                    订单名称：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.orderName" placeholder="请输入订单名称"></el-input>
                </div>
                <div class="input-tip">
                    用户名称：
                </div>
                <div class="input-field">
                    <el-input v-model="queryParam.name" placeholder="请输入用户名称"></el-input>
                </div>
            </el-container>
            <el-container class="content-row">                
                <div class="input-tip">
                    发货时间：
                </div>
                <div class="input-field">
                    <el-date-picker 
                    v-model="queryParam.sendTime" 
                    placeholder="" 
                    type="daterange" 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="input-tip">
                    支付时间：
                </div>
                <div class="input-field">
                    <el-date-picker 
                    v-model="queryParam.payTime" 
                    placeholder="" 
                    type="daterange" 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-container>
        </div>        
        <div class="content-row">
            <el-container>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="primary" @click="clear">清空搜索条件</el-button>
                <el-button type="primary" @click="exportData">导出</el-button>             
            </el-container>
        </div>
        <!-- list列表 -->
        <div>           
            <el-table 
            :data="managerOrderList"
            tooltip-effect="dark"
            style="width:100%;"
            :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}"
            stripe 
            border 
            height="360">              
                <el-table-column label="类型" width="120" prop="orderType"></el-table-column>
                <el-table-column label="订单名称" width="200" prop="orderName"></el-table-column>
                <el-table-column label="订单号" width="150" prop="orderNumber"></el-table-column>
                <el-table-column label="店长信息" width="100" prop="people"></el-table-column>
                <el-table-column label="件数" width="100" prop="count"></el-table-column>
                <el-table-column label="价格" width="100" prop="price"></el-table-column>
                <el-table-column label="佣金" width="100" prop="price1"></el-table-column>
                <el-table-column label="支付时间" width="180" prop="time"></el-table-column>               
                <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                    <el-button type="danger" size="mini" @click="deleteItem(scope.$index)">删除订单</el-button>                                              
                </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Mock from '../../mock/Mock'
import Tools from '@/tools/Tools' 
export default {
   data() {
    return {
        // 订单列表数据
        managerOrderList: [],
        // 筛选订单参数
        queryParam: {
            orderState: '',
            orderName: '',
            name: '',
            payTime: '',
            sendTime: ''
        },
    }
   },
   mounted (){
    this.managerOrderList = Mock.getManagerOrderList();
   },
   //路由更新时刷新数据
   beforeRouteUpdate (to){
    this.managerOrderList = Mock.getManagerOrderList();
   },
   methods: {
    // 模拟请求数据
    search(){
        this.$message({
            type: 'success',
            message: '筛选请求参数：' + JSON.stringify(this.queryParam)
        })
        this.managerOrderList = Mock.getManagerOrderList();
    },
    // 清空筛选项
    clear(){
        this.queryParam = {
            orderState: '',
            orderName: '',
            name: '',
            payTime: '',
            sendTime: ''
        }
        this.managerOrderList = Mock.getManagerOrderList();
    },
    // 导出订单
    exportData() {
        Tools.exportJson('订单.json',JSON.stringify(this.managerOrderList));
    },
    // 删除订单
    deleteItem(item){
        this.managerOrderList.splice(item,1)
    }
   }
}
</script>